// 渲染数据
// console.log(data.beautyPersonalpare[0].imgs[0]);
var dataObj = data.beautyPersonalpare;
function innerHTML(data) {
  var str = '';
  var str1 = '';
  var arr1 = [];
  data.forEach(function (value, i, arr) {
    //   str1 += `<div class="small_img">
    //   <img src=" ${value.imgs}" alt="" />
    // </div>`;
    if (value.brandName == 1) {
      str += `   <li class="main_li">
      <!-- li标签盒子 -->
      <div class="main_li_box">
        <!-- img图片盒子 -->
        <div class="li_box_img">
          <!-- 定位到一个地方是否显示 -->
          <div class="img_hid imd_show">
            <a href="details.html#${value.id}"
              ><img
                src="
             ${value.mediumimg[0]}
              "
                alt=""
            /></a>
          </div>
          <div class="img_hid">
            <a href=""
              ><img
                src="
                ${value.mediumimg[1]}
              "
                alt=""
            /></a>
          </div>
          <div class="img_hid">
            <a href=""
              ><img
                src="
                ${value.mediumimg[2]}
              "
                alt=""
            /></a>
          </div>
        </div>
        <!-- img小图片 -->
        <div class="smallimg_box">
        `;
      for (var k = 0; k < arr[i].imgs.length; k++) {
        str += ` 
      <div class="small_img">
      <img src=" ${arr[i].imgs[k]}" alt="" />
    </div>
          
      `;
      }

      str += `</div><!-- 价格和数量 -->
  <div class="li_tex">
    <div class="li_price">￥${value.newPlice}</div>
    <div class="li_numb">
      已售<i>${value.cumulativeSales}</i>件
    </div>
  </div>
  <!-- 详情介绍 -->
  <div class="li_jeihsao">
    <a href="details.html#${value.id}">${value.title}</a>
  </div>
  <!-- 商家 客服 -->
  <div class="li_service">
    <a href=""
      >商创自营 <i class="iconfont icon-kefu i_blue"></i
    ></a>
  </div>
  <!-- 对比 收藏 加入购物车 -->
  <div class="duibi_box">
    <!-- 对比 -->
    <div class="li_duibi">
      <a href="javascript:void(0) " class="">
        &nbsp; &nbsp;&nbsp;&nbsp;对比
      </a>
    </div>
    <!-- 收藏 -->
    <div class="li_yincnag">
      <a href="javascript:void(0)">
        <i class="iconfont icon-56aixin"></i>
        收藏
      </a>
    </div>
    <!-- 加入购物车 -->
    <div class="li_gouwuche" data-id="${value.id}">
      <a href="javascript:void(0)"
        ><i class="iconfont icon-gouwuche"></i>加入购物车</a
      >
    </div>
  </div>
</div>
</li>`;
    } else {
      str += `   <li class="main_li">
    <!-- li标签盒子 -->
    <div class="main_li_box">
      <!-- img图片盒子 -->
      <div class="li_box_img">
        <!-- 定位到一个地方是否显示 -->
        <div class="img_hid imd_show">
          <a href="details.html#${value.id}"
            ><img
              src="
           ${value.mediumimg[0]}
            "
              alt=""
          /></a>
        </div>
        <div class="img_hid">
          <a href="details.html#${value.id}"
            ><img
              src="
              ${value.mediumimg[1]}
            "
              alt=""
          /></a>
        </div>
        <div class="img_hid">
          <a href="details.html#${value.id}"
            ><img
              src="
              ${value.mediumimg[2]}
            "
              alt=""
          /></a>
        </div>
      </div>
      <!-- img小图片 -->
      <div class="smallimg_box">
      `;
      for (var k = 0; k < arr[i].imgs.length; k++) {
        // console.log(value.imgs.length);
        // console.log(value.imgs);
        // console.log(arr[i].imgs[k]);
        str += ` 
    <div class="small_img">
    <img src=" ${arr[i].imgs[k]}" alt="" />
  </div>
        
    `;
      }

      str += `</div><!-- 价格和数量 -->
<div class="li_tex">
  <div class="li_price">￥${value.newPlice}</div>
  <div class="li_numb">
    已售<i>${value.cumulativeSales}</i>件
  </div>
</div>
<!-- 详情介绍 -->
<div class="li_jeihsao">
  <a href="details.html#${value.id}">${value.title}</a>
</div>
<!-- 商家 客服 -->
<div class="li_service">
  <a href=""
    >美宝莲 <i class="iconfont icon-kefu i_yellow"></i
  ></a>
</div>
<!-- 对比 收藏 加入购物车 -->
<div class="duibi_box">
  <!-- 对比 -->
  <div class="li_duibi">
    <a href="javascript:void(0) " class="">
      &nbsp; &nbsp;&nbsp;&nbsp;对比
    </a>
  </div>
  <!-- 收藏 -->
  <div class="li_yincnag">
    <a href="javascript:void(0)">
      <i class="iconfont icon-56aixin"></i>
      收藏
    </a>
  </div>
  <!-- 加入购物车 -->
  <div class="li_gouwuche" data-id="${value.id}">
    <a href="javascript:void(0)"
      ><i class="iconfont icon-gouwuche"></i>加入购物车</a
    >
  </div>
</div>
</div>
</li>`;
    }
    if (value.brandName == 1) {
      str1 += `<li class="small_li">
      <div class="sma_li_lef">
        <div class="sma_li_img">
          <a href="details.html#${value.id} "
            ><img
              src="${value.mediumimg[0]}"
              alt=""
          /></a>
        </div>
        <div class="sma_li_rig">
          <div class="a_jiehsao">
            <a href="">
            ${value.title}
            </a>
          </div>
          <!-- 销量评分 -->
          <div class="sma_lie">
            <div class="sma_lie_xiaoliang">销量: ${value.cumulativeEvaluation}</div>
            <div class="sma_lie_pingjia">评价: ${value.cumulativeSales}</div>
          </div>
        </div>
      </div>
      <div class="sma_li_shangjia">
        <div class="li_service">
          <a href="">商创自营 <i class="iconfont icon-kefu i_yellow"></i></a>
        </div>
      </div>
      <div class="sma_price">
        <div class="shop_price">￥${value.newPlice}</div>
        <div class="del_price">￥${value.oldPrice}</div>
      </div>
      <div class="duibi_box">
        <!-- 对比 -->
        <div class="li_duibi">
          <a href="javascript:void(0)">
           &nbsp;&nbsp;&nbsp;对比 </a>
        </div>
        <!-- 收藏 -->
        <div class="li_yincnag">
          <a href="javascript:void(0)">
            <i class="iconfont icon-56aixin"></i>
            隐藏
          </a>
        </div>
        <!-- 加入购物车 -->
        <div class="li_gouwuche">
          <a href="javascript:void(0)"
            ><i class="iconfont icon-gouwuche"></i>加入购物车</a
          >
        </div>
      </div>
    </li>`;
    } else {
      str1 += `<li class="small_li">
      <div class="sma_li_lef">
        <div class="sma_li_img">
          <a href=""
            ><img
              src="${value.mediumimg[0]}"
              alt=""
          /></a>
        </div>
        <div class="sma_li_rig">
          <div class="a_jiehsao">
            <a href="">
            ${value.title}
            </a>
          </div>
          <!-- 销量评分 -->
          <div class="sma_lie">
            <div class="sma_lie_xiaoliang">销量: ${value.cumulativeEvaluation}</div>
            <div class="sma_lie_pingjia">评价: ${value.cumulativeSales}</div>
          </div>
        </div>
      </div>
      <div class="sma_li_shangjia">
        <div class="li_service">
          <a href="">美宝莲 <i class="iconfont icon-kefu i_yellow"></i></a>
        </div>
      </div>
      <div class="sma_price">
        <div class="shop_price">￥${value.newPlice}</div>
        <div class="del_price">￥${value.oldPrice}</div>
      </div>
      <div class="duibi_box">
        <!-- 对比 -->
        <div class="li_duibi">
          <a href="javascript:void(0)">
           &nbsp;&nbsp;&nbsp;对比 </a>
        </div>
        <!-- 收藏 -->
        <div class="li_yincnag">
          <a href="javascript:void(0)">
            <i class="iconfont icon-56aixin"></i>
            隐藏
          </a>
        </div>
        <!-- 加入购物车 -->
        <div class="li_gouwuche">
          <a href="javascript:void(0)"
            ><i class="iconfont icon-gouwuche"></i>加入购物车</a
          >
        </div>
      </div>
    </li>`;
    }
  });
  $('.main_ul').html(str);
  $('.small_ul').html(str1);
}
innerHTML(dataObj);
`4`;
// 点击价格排序
$('.screen_li').click(function () {
  $(this)
    .children('a')
    .children()
    .toggleClass('iconfont icon-changyongtubiao-fuben-17')
    .toggleClass('iconfont icon-changyongtubiao-fuben-13')
    .parents('li')
    .siblings()
    .children('a')
    .children()
    .removeClass('icon-changyongtubiao-fuben-17')
    .addClass('icon-changyongtubiao-fuben-13');

  //   if (
  //     $(this)
  //       .children('a')
  //       .children()
  //       .hasClass('iconfont icon-changyongtubiao-fuben-17')
  //   ) {
  //     $(this)
  //       .siblings()
  //       .children('a')
  //       .children()
  //       .toggleClass('iconfont icon-changyongtubiao-fuben-13');
  //   }
});

var p = 0;
$('.screen_li')
  .eq(4)
  .click(function () {
    p++;
    var arr1;
    dataObj.forEach(function (value, i, arr) {
      if (p % 2 == 0) {
        arr1 = arr.sort(function (a, b) {
          return a.newPlice - b.newPlice;
        });
      } else
        arr1 = arr.sort(function (a, b) {
          return b.newPlice - a.newPlice;
        });
    });
    innerHTML(arr1);
    dianji();
    small();
  });
// 默认
$('.screen_li')
  .eq(0)
  .click(function () {
    p++;
    if (p % 2 == 0) {
      var newdata = dataObj.sort(function (a, b) {
        return a.id - b.id;
      });
      innerHTML(newdata);
      dianji();
      small();
    } else {
      var newdata = dataObj.sort(function (a, b) {
        return b.id - a.id;
      });
      innerHTML(newdata);
      dianji();
      small();
    }
  });
// 销量排序

$('.screen_li')
  .eq(1)
  .click(function () {
    p++;
    var arr1;
    dataObj.forEach(function (value, i, arr) {
      if (p % 2 == 0) {
        arr1 = arr.sort(function (a, b) {
          return a.cumulativeSales - b.cumulativeSales;
        });
      } else
        arr1 = arr.sort(function (a, b) {
          return b.cumulativeSales - a.cumulativeSales;
        });
    });
    innerHTML(arr1);
    dianji();
    small();
  });
//新品排序
$('.screen_li')
  .eq(2)
  .click(function () {
    p++;
    var arr1;
    dataObj.forEach(function (value, i, arr) {
      if (p % 2 == 0) {
        arr1 = arr.sort(function (a, b) {
          return a.cumulativeSales - b.cumulativeSales;
        });
      } else
        arr1 = arr.sort(function (a, b) {
          return b.cumulativeSales - a.cumulativeSales;
        });
    });
    innerHTML(arr1);
    dianji();
    small();
  });
// 评论数排序
$('.screen_li')
  .eq(3)
  .click(function () {
    p++;
    console.log(p);
    var arr1;
    dataObj.forEach(function (value, i, arr) {
      if (p % 2 == 0) {
        arr1 = arr.sort(function (a, b) {
          return a.cumulativeEvaluation - b.cumulativeEvaluation;
        });
      } else
        arr1 = arr.sort(function (a, b) {
          return b.cumulativeEvaluation - a.cumulativeEvaluation;
        });
    });
    innerHTML(arr1);
    dianji();
    small();
  });

// 点击事件
$('.qingkon_box')
  .eq(0)
  .click(function () {
    $('.input_price').val('');
    $('.inquire_box').hide();
  });
$('.input_price').on('click', function () {
  $('.inquire_box').show();
});
// 点击清除按钮
$('.qingkon_box')
  .eq(0)
  .click(function () {
    $('.input_price').val('');
    $('.inquire_box').hide();
  });
// 点击显示
$('.input_price').on('click', function () {
  $('.inquire_box').show();
});
// 点击确定
$('.qingkon_box')
  .eq(1)
  .click(function () {
    var prcie1 = parseInt($('.input_price').eq(0).val());
    var prcie2 = parseInt($('.input_price').eq(1).val());
    var arr1;
    if (prcie1 > prcie2) {
      alert('左边价格不能大于右边价格');
      return;
    } else if (isNaN(prcie1) || isNaN(prcie2)) {
      alert('价格不能为空');
      return;
    } else {
      arr1 = dataObj.filter(function (value, i, arr) {
        return prcie1 <= value.newPlice && prcie2 >= value.newPlice;
      });

      innerHTML(arr1);
      dianji();
      small();
    }

    $('.inquire_box').hide();
  });
// 模糊查询结束
// 点击包邮
$('.s_check1').click(function () {
  $(this).children().toggleClass('s_sheck1_bgc');
});
$('.s_check1')
  .eq(0)
  .click(function () {
    $('.big_box').toggleClass('big_hide').siblings().toggleClass('big_hide');
  });
// 点击自营商品
$('.s_check1')
  .eq(1)
  .click(function () {
    p++;
    if (p % 2 != 0) {
      var arr1 = dataObj.filter(function (value, i) {
        return value.brandName == 1;
      });
      innerHTML(arr1);
      dianji();
      small();
    } else {
      innerHTML(dataObj);
      dianji();
      small();
    }
  });
$('.s_check1')
  .eq(2)
  .click(function () {
    innerHTML(dataObj);
    dianji();
    small();
  });
// 排序结束
$('.unfold').click(function () {
  $('.brand').toggleClass('brand_2');
});
// 当选择个数大于五个 弹窗
var index = 0;
$('.xuanze_li').click(function () {
  // $(this).children('span').toggleClass('xuanze_img2');
  if ($(this).children('span').hasClass('xuanze_img')) {
    $(this).children('span').toggleClass('xuanze_img2');
  }
  if ($(this).children('span').hasClass('xuanze_img2')) {
    index++;
  } else {
    index--;
  }
  if (index >= 6) {
    alert('不能大于五个');
    index == 5;
    $(this).children('span').toggleClass('xuanze_img2');
  }
  if ($('.xuanze_img').hasClass('xuanze_img2')) {
    $('.btn_queding').show();
  } else {
    $('.btn_queding').hide();
  }
});
// 鼠标移入事件
$('.zimu_li').mouseover(function () {
  $(this).toggleClass('li_red').siblings().removeClass('li_red');
});
// console.log(data.beautyPersonalpare[0].newPlice);
var data1 = data.beautyPersonalpare;
for (let i = 0; i < data1.length; i++) {}
// $('.check').click(function () {
//   $(this).children('a').children('span').text('收起');
//   // $(this).children('i').toggleClass('icon-jianhao_o');
// });
// //
$('.check').click(function () {
  $(this)
    .children()
    .children('i')
    .toggleClass('iconfont icon-jiahao_o')
    .toggleClass('iconfont icon-jianhao_o');
  if ($(this).children().children('i').hasClass('iconfont icon-jianhao_o')) {
    $(this).children('a').children('span').text('收起');
  } else {
    $(this).children('a').children('span').text('多选');
  }
  $('.brand_duoxuan').toggle();
  $('.brand_img').toggle();
});

$('.show_img').click(function () {
  $(this).toggleClass('show_red').siblings().removeClass('show_red');
  // console.log($(this).next());
});
// 点击 大图小图 显示模式
$('.big_show').click(function () {
  $('.main_list').show();
  $('.main_list2').hide();
});
$('.small_show').click(function () {
  $('.main_list').hide();
  $('.main_list2').show();
});
// 收起
$('.rig_jiantou').click(function () {
  $(this).parent().toggleClass('list_smallbox');
  // 切换字体图标
  $(this)
    .children('a')
    .children('i')
    .toggleClass('iconfont icon-xiangyoujiantou')
    .toggleClass('iconfont icon-xiangzuojiantou');
  $('.main_list').toggleClass('width_1392').next().toggleClass('width_1392');
});
// 点击关闭事件
$('.btn_guanbi').click(function () {
  $('.brand_duoxuan').hide();
  $('.brand_img').show();

  if (
    $('.check').children().children('i').hasClass('iconfont icon-jianhao_o')
  ) {
    $('.check').children('a').children('span').text('收起');
  } else {
    $('.check').children('a').children('span').text('多选');
  }
});
// 切换
function small() {
  $('.small_img').mouseover(function () {
    $(this)
      .parent()
      .prev()
      .children()
      .eq($(this).index())
      .addClass('imd_show')
      .siblings()
      .removeClass('imd_show');
  });
}
small();

// 获取选中的长度
// $('.li_duibi').click(function () {
//   console.log($(':checked').index());
// });
// 点击收藏
// console.log($('.li_yincnag'));
function dianji() {
  $('.li_yincnag').click(function () {
    $(this)
      .children('a')
      .children('i')
      .toggleClass('iconfont icon-56aixin')
      .toggleClass('iconfont icon-aixin');
  });
  $('.li_duibi').click(function () {
    $(this).children('a').toggleClass('label_bgc');
    // .toggleClass('label_bgc');
  });
}
dianji();

// 侧边栏
var liEs = document.querySelectorAll('#quick_links ul li');
var ibar_login_box = document.querySelector('.ibar_login_box');
// console.log(liEs);
liEs[0].onmouseover = function () {
  ibar_login_box.style.display = 'block';
};
liEs[0].onmouseout = function () {
  ibar_login_box.style.display = 'none';
};
//---------------侧边栏(下面每一项)------------------------
var onEle = document.querySelectorAll('.ones');
var mp_tooltip = document.querySelectorAll('.mp_tooltip');
// console.log(onEle);
// console.log(mp_tooltip);
function side() {
  for (var i = 0; i < mp_tooltip.length; i++) {
    mp_tooltip[i].className = 'mp_tooltip';
  }
}
for (var j = 0; j < onEle.length; j++) {
  onEle[j].index = j;
  onEle[j].onmouseover = function () {
    side();
    mp_tooltip[this.index].className = 'mp_tooltip ele';
  };
  onEle[j].onmouseout = function () {
    side();
  };
}
// ---------------------------侧边栏右侧出现-------------------
var shopCart = document.querySelector('#shopCart');
var ibar_closebtn = document.querySelector('.ibar_closebtn');
var quick_links_wrap = document.querySelector('.quick_links_wrap');
shopCart.onclick = function () {
  quick_links_wrap.style.width = '320px';
};
ibar_closebtn.onclick = function () {
  quick_links_wrap.style.width = '40px';
};
$('.returnTop').click(function (e) {
  $('html').animate(
    {
      scrollTop: 0,
    },
    1000
  );
});
// 点击加入购物车;
var contNum = 0;
$('.li_gouwuche').click(function () {
  // contNum++;
  var this1 = $(this);
  var addObj = dataObj.filter(function (value, i) {
    return this1.attr('data-id') == value.id;
  });
  // console.log(addObj[0].id);
  var aa = addObj[0].num++;
  var obj = {
    uid: addObj[0].id,
    uimg: addObj[0].imgs[0],
    utitle: addObj[0].title,
    ucount: aa,
    uprice: addObj[0].newPlice,
  };
  var a = JSON.stringify(obj);

  localStorage.setItem(addObj[0].id, a);
  // var c = localStorage.getItem(addObj[0].id);

  // console.log(obj.ucount);
});
